<!-- 加药管理 -->
<template>
  <div class="app-container">
    <div class="tabs">
      <CustomTabs :tabList="tabsOption" :activeName="activeName" @tabSelect="tabSelectHandler" />
    </div>
    <div ref="switchTabsContentRef">
      <px-scrollbar>
        <transition name="fab-tabs-fade" mode="out-in">
          <component :is="activeCom" :activeName="activeName" />
        </transition>
      </px-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import CustomTabs from "@/components/Tabs/index.vue";
import overViewCom from "./components/overView/index.vue";
import mchwCom from "./components/MCHW/index.vue";
import lchwCom from "./components/LCHW/index.vue";
import hwCom from "./components/HW/index.vue";
import hhwCom from "./components/HHW/index.vue";
import cwCom from "./components/CW/index.vue";
import pcwCom from "./components/PCW/index.vue";
import allCom from "./components/ALL/index.vue";
import { ref, markRaw, computed, onMounted, onUnmounted } from "vue";
import { type OptionsType } from "@/components/ReSegmented";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";

const defaultHeight = ref<number>(700);

const tabsOption = ref<Array<OptionsType>>([
  {
    name: "overView",
    label: "概览",
    com: markRaw(overViewCom)
  },
  {
    name: "MCHWConfig",
    label: "MCHW",
    com: markRaw(mchwCom)
  },
  {
    name: "LCHWConfig",
    label: "LCHW",
    com: markRaw(lchwCom)
  },
  {
    name: "HWConfig",
    label: "HW",
    com: markRaw(hhwCom)
  },
  {
    name: "HHWConfig",
    label: "HHW",
    com: markRaw(hwCom)
  },
  {
    name: "CWConfig",
    label: "CW",
    com: markRaw(cwCom)
  },
  {
    name: "PCWConfig",
    label: "PCW",
    com: markRaw(pcwCom)
  },
  {
    name: "all",
    label: "全部",
    com: markRaw(allCom)
  }
]);

const activeName = ref("overView");

const switchTabsContentRef = ref(null);

const activeCom = computed(() => tabsOption.value.find(item => item.name === activeName.value).com);
const switchTabsChangeHandler = async () => await useUpdateDomHeight(defaultHeight, switchTabsContentRef, null, defaultHeight.value);

const tabSelectHandler = async (selectName: string) => {
  activeName.value = selectName;
  await switchTabsChangeHandler();
};

onMounted(async () => {
  await switchTabsChangeHandler();
});

onUnmounted(() => useCancelUpdateDomHeight());
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
  border-radius: 4px;

  .tabs {
    padding: 0 24px;
  }

  .px-scrollbar {
    .fab-tabs-fade-enter-active,
    .fab-tabs-fade-leave-active {
      transition: all 0.4s ease;
    }

    .fab-tabs-fade-enter-from {
      opacity: 0;
      transform: translateX(-80px);
    }

    .fab-tabs-fade-leave-to {
      opacity: 0;
      transform: translateX(80px);
    }
  }
}
</style>
